<template>
  <div class="hello">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <h2> axios的使用</h2>
    <a href="javascript:"   class="btn btn-primary"  @click="get">GET请求</a>
    <a href="javascript:"   class="btn btn-primary"  @click="post">POST请求</a>
    <a href="javascript:"   class="btn btn-primary"  @click="http">HTTP请求</a>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'HelloWorld',
  data () {
    return {
     
    }
  },
  methods:{
    get(){
      axios.get("https://cnodejs.org/api/v1/topics",{
        //get参数
        params:{
          tab:"share",
          page:3
        },
        headers:{
          token:"tom"
        }
      }).then(res=>{
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
    },
    post(){
      axios.post(
      "https://cnodejs.org/api/v1/accesstoken",
      {
        //post参数
        accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
      },
      {
        headers:{
          token:"tom"
        }
      }
      
      ).then(res=>{
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
    },
    http(){
      axios({
        //url:"https://cnodejs.org/api/v1/topics",
        //method:"get",
        //get参数
        //params:{
        //  tab:"share",
        //  page:2
        //},
        url:"https://cnodejs.org/api/v1/accesstoken",
        method:"post",
        //post请求参数 
        data:{
          //post参数
          accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
        },
        headers:{
          token:"tom"
        },
        timeout: 10000,



      }).then(res=>{
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
